<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button-group>
      <el-button type="primary" v-if="menuManager_btn_add" icon="plus" @click="handlerAdd">添加</el-button>
      <el-button type="primary" v-if="menuManager_btn_edit" icon="edit" @click="handlerEdit">编辑</el-button>
      <el-button type="primary" v-if="menuManager_btn_del" icon="delete" @click="handleDelete">删除</el-button>
     </el-button-group>
    </div>
    <el-row>
      <el-col :span="8" style='margin-top:15px;'>
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <el-tree
          class="filter-tree"
          :data="treeData"
          node-key="id"
          highlight-current
          :props="defaultProps"
          @node-click="getNodeData"
          ref="menuTree"

          >
        </el-tree>
      </el-col>
      <el-col :span="16" style='margin-top:15px;'>
        <el-card class="box-card">
        <el-form :label-position="labelPosition" label-width="80px" :model="form" ref="form">
              <el-input v-model="form.id" type="hidden"  placeholder=""></el-input>
          <el-form-item label="路径编码" prop="fullpath">
              <el-input v-model="form.fullpath" :disabled="formEdit" placeholder="请输入路径编码"></el-input>
          </el-form-item>
              <el-form-item label="标题" prop="name">
              <el-input v-model="form.name" :disabled="formEdit"  placeholder="请输入标题"></el-input>
          </el-form-item>
              <el-form-item label="父级节点" prop="parentId">
              <el-input v-model="form.parentId" :disabled="formEdit" placeholder="请输入父级节点" readonly></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
              <el-input v-model="form.icon" :disabled="formEdit" placeholder="请输入图标"></el-input>
          </el-form-item>
              <el-form-item label="资源路径" prop="url">
              <el-input v-model="form.url" :disabled="formEdit" placeholder="请输入资源路径"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="orderNum">
              <el-input v-model="form.orderNum" :disabled="formEdit" placeholder="请输入排序"></el-input>
          </el-form-item>
          <el-form-item label="是否叶子节点"   prop="isLeaf">
              <el-switch v-model="form.isLeaf" :disabled="formEdit" active-color="#13ce66"  inactive-color="#D4D4D4"></el-switch>
          </el-form-item>
          <el-form-item v-if="formStatus == 'update'">
            <el-button type="primary" @click="update">更新</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
          <el-form-item v-if="formStatus == 'create'">
            <el-button type="primary" @click="create">保存</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
        </el-card>
        <el-card class="box-card">
            <span>按钮或资源</span>
          <menu-element :menuId="currentId" ref="menuElement"></menu-element>
        </el-card>
      </el-col>
    </el-row>
  </div>
  
</template>
<script>
  import { getTreemenuList, getMenuDetail, addMenu, delMenu, updateMenu } from '@/api/ucmenu'
  export default {
    name: 'ucMenu',
    components: {
      'menu-element': () => import('./components/element')
    },
    data() {
      return {
        filterText: '',
        list: null,
        total: null,
        formEdit: true,
        formAdd: true,
        formStatus: '',
        showElement: false,
        typeOptions: ['menu', 'dirt'],
        listQuery: {
          name: undefined
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label',
          id: 'id',
          type: 'type',
          isLeaf:'isLeaf'
        },
        labelPosition: 'right',
        form: {
          id: undefined,
          name: undefined,
          parentId: undefined,
          appId: undefined,
          appName: undefined,
          orderNum: undefined,
          url: undefined,
          icon: undefined,
          isLeaf: 0,
          fullpath: undefined
        },
        currentId: '-1',
        appId: undefined,
        appName: undefined,
        apps: [],
        isLeaf: undefined,
        menuManager_btn_add: true,
        menuManager_btn_edit: true,
        menuManager_btn_del: true
        }
    },
    watch: {
      filterText(val) {
        this.$refs.menuTree.filter(val);
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        const param = {
          'body': {
              "treeDTO":{
              "name":this.listQuery.name,
            }
          }
        }
        getTreemenuList(param).then(response => {
          this.treeData = response.body.treeDTOList;
        });
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      getNodeData(data) {
        if (!this.formEdit) {
          this.formStatus = 'update';
        }
        this.currentId = data.id;
        this.appId = data.appId;
        this.appName = data.appName;
        this.isLeaf = data.isLeaf;
        this.formEdit = true;
        if(data.type == 'app'){
          return;
        }
        const param = {
          'body': {
            "ucMenuDTO":{
              "id":data.id,
            }
          }
        }
        getMenuDetail(param).then(response => {
          this.form = response.body.ucMenuDTO;
          if(this.form.isLeaf === 1){
            this.form.isLeaf = true;
          }
        });
        this.showElement = true;
        this.$refs.menuElement.menuId = data.id;
        this.$refs.menuElement.getResourceLists();
      },
      handlerAdd() {
        if(-1 === this.currentId){
          this.$notify({
            title: '通知',
            message: "请选择一个树的节点",
            type: 'warning',
            duration: 2000
          });
          return
        }
        if(1 === this.isLeaf){
          this.$notify({
            title: '通知',
            message: "叶子节点不允许新增节点!",
            type: 'warning',
            duration: 2000
          });
          return
        }
        this.resetForm();
        this.form.parentId = this.currentId;
        this.form.appId = this.appId;
        this.form.appName = this.appName;
        this.formEdit = false;
        this.formStatus = 'create';
      },
      handlerEdit() {
        if (this.form.id) {
          this.formEdit = false;
          this.formStatus = 'update';
        }
      },
      handleDelete() {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const param = {
            'body': {
              "ucMenuDTO":{
                "id":this.currentId
              }
            }
          }
          delMenu(param).then(() => {
            this.getList();
            this.resetForm();
            this.onCancel();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            });
          });
        });
      },
      create() {
        if(this.form.isLeaf){
          this.form.isLeaf = 1
        }else{
          this.form.isLeaf = 0
        }
        const param = {
          'body': {
            "ucMenuDTO":{
              name: this.form.name,
              parentId: this.form.parentId,
              appId: this.form.appId,
              appName: this.form.appName,
              orderNum: this.form.orderNum,
              url: this.form.url,
              icon: this.form.icon,
              isLeaf: this.form.isLeaf,
              fullpath: this.form.fullpath
            }
          }
        }
        addMenu(param).then(() => {
          this.getList();
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          });
        });
      },
      update() {
        if(this.form.isLeaf){
          this.form.isLeaf = 1
        }else{
          this.form.isLeaf = 0
        }
        const param = {
          'body': {
            "ucMenuDTO":{
              id: this.form.id,
              name: this.form.name,
              parentId: this.form.parentId,
              appId: this.form.appId,
              appName: this.form.appName,
              orderNum: this.form.orderNum,
              url: this.form.url,
              icon: this.form.icon,
              isLeaf: this.form.isLeaf,
              fullpath: this.form.fullpath
            }
          }
        }
        updateMenu(param).then(() => {
          this.getList();
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
        });
      },
      onCancel() {
        this.formEdit = true;
        this.formStatus = '';
      },
      resetForm() {
        this.form = {
          id: undefined,
          name: undefined,
          parentId: undefined,
          appId: undefined,
          appName: undefined,
          orderNum: undefined,
          url: undefined,
          icon: undefined,
          isLeaf: 0,
          fullpath: undefined
        };
      }
    }
  }
</script>